<template>
	<view class='liveStart'>
		<view>
			<div class="video" v-if="!contents.play">
				<image :src="contents.detail.thumb.src" mode="aspectFill"></image>
				<view class='playmodal' >
					<image @tap="showError(contents.playMsg || '播放遇到问题')" src="../../static/img/play.png" mode="widthFix"></image>
				</view>
			</div>
			<video
				@play="this.isPlay = true"
				@ended="this.isPlay = false"
				@pause="this.isPlay = false"
				v-if="contents.liveUrl && contents.play"
				id="myVideo"
				:src="contents.liveUrl"
				@error="videoErrorCallback" 
				controls
				objectFit="cover"
				:poster="contents.detail.thumb.src"
			><cover-view v-show="!identification" @tap="showTip" class="controls-cover"></cover-view>
			</video>		
		</view>
		<view :class="isPlay?'scrollWrap':''">
			<!-- :danmu-list="danmuList" enable-danmu danmu-btn  -->
			<view class="content">
				<view class="title"><text>{{contents.title1}}</text></view>
				<view class="desc">
					<text>{{contents.title2}}</text>
					<text>{{contents.shared>10000?'1w+':(contents.shared || 0)}} 分享</text>
				</view>
				<view class="desc">
					<text>时间：{{contents.date}}</text>
					<text>{{contents.read>10000?'1w+':(contents.read || 0)}} 阅读</text>
				</view>
			</view>
			<view class="tab">
				<text :class="contents.detail.chat==0?'tab_active':''" @tap="changeShowTab(0)">互动答疑</text>
				<text :class="contents.detail.chat==1?'tab_active':''" @tap="changeShowTab(1)">直播详情</text>
			</view>
			<keep-alive>
				<view class="content borderTop" v-show="contents.detail.chat == 1">
					<view class="info" :id="'a'+item.desc._id" v-if="contents.detail.sections" v-for="item in contents.detail.sections" :key="item.desc._id">
						<view class='info_title'><text>【{{item.name}}】</text></view>
						<rich-text :nodes="item.desc.text"></rich-text>
					</view>
				</view>
			</keep-alive>
			<keep-alive>
				<livechat
					v-show="contents.detail.chat == 0"
					:ids="opt.id" 
					:contents="contents" 
					:title="false"
					@refresh="getLiveContentDetail" 
					ref="Comments"
				></livechat>
			</keep-alive>
			
			<view class="mulu" v-show="contents.detail.chat==1">
				<view class="image" @tap="changePanShow">
					<image src="../../static/img/mulu.png" mode="widthFix"></image>
				</view>
				<view class='content' v-show="panShow">
					<view @tap='scrollTo("a"+item.desc._id)' v-if="contents.detail.sections" v-for="item in contents.detail.sections" :key="item.desc._id">
						<text class='active'>{{item.name.slice(0,4)}}</text>
					</view>
				</view>
			</view>
			<uni-share 
				:contents="contents" 
				:shareShow="shareShow" 
				@cancelshow="this.shareShow=false"
				@shareSuccessRefresh = "getLiveContentDetail"
			></uni-share>
		</view>
		<chunLei-modal v-model="showModal" :mData="showModalData" type="default" @onConfirm="onModalConfirm" @cancel="onModalCancel" :maskEnable="false">
		</chunLei-modal>
	</view>
</template>

<script>
	// src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
	import uniShare from "@/components/uni-share.vue"
	import livechat from "@/components/livechat.vue"
	import chunLeiModal from '@/components/chunLei-modal/chunLei-modal.vue'
	import {
		getLiveContent,getHcp
	} from '@/utils/api' 

	export default {
		components: {uniShare,livechat,chunLeiModal},
		data() {
			return {
				showModal:false,
				showModalData:{},
				isPlay:false,
				shareShow:false,
				panShow:false,
				opt:{},
				contents:{ //详情内容
					liveUrl:'http://',
					detail:{
						chat:0,
						thumb:{}
					}
				},
				chatData:{
					"code": 200,
					"userId": "H_5dafcabac7f96600c8d70c5e",
					"token": "MRZodihtz5mPLEPIv8A0dHWeXetIqjH8wWJVJw0TwfKS5pOi6TtVX7uv1FyNNSGsEBL8qkHehm1tCwpmxX/Wl2asbudWBoEbfE24qfjHneD7gPsBU4+xmpccL7fmuct2"
				},
				identification:false,
				userInfo:{}
			}
		},
		onReady: async function(res) {
			let res1 = await getHcp();
			this.userInfo = res1.data
			if(this.userInfo.approved && this.userInfo && this.userInfo.identification && this.userInfo.identification.idCard){
				if(this.userInfo.identification.idCard.status == 'approved'){
					//已认证
					this.identification = true
				}
			}
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			onModalConfirm(){
				uni.navigateTo({
				    url: "/pages/user/info/base"
				});
			},
			onModalCancel(){
				this.showModal = false,
				this.showModalData = {}
			},
			showTip(){
				this.showModal = true
				this.showModalData = {title:'提示',content:this.userInfo.unAuthMsg,cancelText:'暂不认证',confirmText:'立即认证',confirmColor:'rgb(173, 133, 252)'}
			},
			changePanShow(){
				this.panShow = !this.panShow
			},
			scrollTo(id){
				const query = uni.createSelectorQuery()
				let scrollTop = 0
				query.selectViewport().scrollOffset(res => {
				  console.log("竖直滚动位置：" + res.scrollTop);
				  scrollTop = res.scrollTop
				}).exec();
				console.log("#"+id,999999)
				query.select('#'+id).boundingClientRect((res)=>{
					console.log('元素顶部距离：'+res.top)
					uni.pageScrollTo({
						duration:0,
						scrollTop:scrollTop + res.top
					}) 
				}).exec(); 
			},
			showError(str){
				uni.showModal({
					content: str,
					showCancel: false
				})
			},
			videoErrorCallback: function(e) {
				// this.isPlay = false
				// uni.showModal({
				// 	content: e.target.errMsg || '视频加载出错',
				// 	showCancel: false
				// })
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			changeShowTab(v){
				this.contents.detail.chat = v
				// this.showTab = v
			},
			//获取详情内容
			async getLiveContentDetail(){
				let data = await getLiveContent(this.opt)
				if(data.status == 0){
					this.contents = data.data
				}
			},
		},  
		mounted() {

		},
		onLoad(opt){
			this.opt = opt
			this.getLiveContentDetail()
		},
		onNavigationBarButtonTap(e){
			if(e.key=='share'){
				this.shareShow = true
			}
		}
	}
</script>

<style lang="scss">
	.liveStart{
		padding-bottom: 130upx;
		.video{
			width: 100%;
			height: 422upx;
			image{
				width: 100%;
				height: 100%;
			}
			.playmodal{
				position: absolute;
				width: 100%;
				height: 422upx;
				left: 0;
				top: 0;
				background: rgba(51,51,51,0.3);
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 88upx;
				}
			}
		}
		.mulu{
			position: fixed;
			right: 20upx;
			bottom: 500upx;
			width: 80upx;
			height: 100upx;
			.image{
				position: absolute;
				width: 50upx;
				height: 40upx;
				right: 0;
				padding: 12upx;
				border-radius: 4upx;
				border:1px solid rgba(194,162,237,1);
				background: #fff;
				image{
					width: 100%;
				}
			}
			.content{
				background:rgba(255,255,255,1);
				border:1px solid rgba(194,162,237,1);
				box-shadow:0px 0px 10upx 0px rgba(194,162,237,0.25);
				border-radius:4upx;
				position: absolute;
				width: 100upx;
				// height: 80upx;
				right: 0;
				top: 66upx;
				padding: 0upx 10px;
				text{
					font-size:24upx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(153,153,153,1);
					line-height:56upx;
					&.active{
						font-size:24upx;
						font-family:PingFang SC;
						font-weight:bold;
						color:rgba(173,133,252,1);
					}
				}
			}
		}
		#myVideo{
			width: 100%;
			height: 422upx;
		}
		.controls-cover{
			width: 100%;
			height: 422upx;
		}
		.scrollWrap{
			height: calc(100vh - 522upx - var(--status-bar-height));
			overflow: auto;
		}
		.content{
			padding: 36upx 20upx;
			.title{
				margin-bottom: 30upx;
				text{
					font-size:34upx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
			}
			.desc{
				margin-bottom: 15upx;
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
				line-height:36upx;
				display: flex;
				justify-content: space-between;
			}
			.button2{
				width: 100%;
				height: 88upx;
				background:linear-gradient(90deg,rgba(131,175,238,1) 0%,rgba(168,127,251,1) 100%);
				text-align:center;
				position:relative;
				border-radius: 10upx;
				margin:36upx 0;
				text{
					line-height: 88upx;
					font-size:34upx;
					font-family:PingFang SC;
					font-weight:500;
					color:#fff;
				}
				.right{
					position: absolute;
					right: 20upx;
					font-size:34upx;
					font-family:PingFang SC;
					font-weight:400;
					color:#fff;
				}
			}
			.button{
				width: 100%;
				height: 88upx;
				background:url("../../static/img/yibaoming.png");
				background-size: cover;
				text-align:center;
				position:relative;
				margin:36upx 0;
				text{
					line-height: 88upx;
					font-size:34upx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(102,102,102,1);
				}
				.right{
					position: absolute;
					right: 20upx;
					font-size:34upx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(102,102,102,1);
				}
			}
			
			.info{
				// background: red;
				margin-bottom: 16upx;
				.info_title{
					// margin-left:-12upx;
					// font-weight: bold;
				}
				text{
					font-size:28upx;
					font-family:PingFang SC;
					color:#333;
				}
			}
		}
		.tab{
			display: flex;
			justify-content: space-around;
			text{
				font-size:30upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
				width: 162upx;
				text-align: center;
				padding-bottom: 20upx;
			}
			.tab_active{
				font-size:30upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(185,152,250,1);
				border-bottom: 10upx solid rgba(185,152,250,1);
			}
			
		}
		.borderTop{
			border-top: 6upx solid #F4F4F4;
		}
		
	}
</style>
